<script setup>
import { Edit, Delete, More } from "@element-plus/icons-vue";
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, watch, onMounted } from "vue";
import { getUserList } from "@/api/userManage";
import { formatTime } from "@/utils/format";

const loading = ref(false);

const orderPreview = ref(null);
const userEdit = ref(null);

// 请求参数
const params = reactive({
  current: 1,
  size: 10,
  keyword: "",
});

// 存储用户数据列表
const userList = ref([]);
// 存储用户数据总数
const total = ref(0);
// 获取用户列表
const getList = async () => {
  loading.value = true;
  const res = await getUserList(params);
  console.log(res);

  userList.value = res.data.data.data;
  total.value = res.data.data.total;
  loading.value = false;
};
getList();

// 正确写法：
const handleSizeChange = (val) => {
  params.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  params.current = val;
  getList();
};

// 搜索
const onSearch = () => {
  params.current = 1; // 搜索时重置到第一页
  getList();
};

// 重置
const restore = () => {
  params.keyword = "";
  params.current = 1; // 重置时回到第一页
  getList();
};
const filterTag = (value, row) => {
  return row.roleType === value;
};

const success = (e) => {
  if (e === "add") {
    // 最后一页已经满了，则跳转到最后一页+1
    if (total.value % params.size === 0) {
      params.current = Math.ceil(total.value / params.size) + 1;
    } else {
      // 跳转到最后页
      params.current = Math.ceil(total.value / params.size);
    }
  }
  getList();
};
</script>

<template>
  <Card title="用户管理">
    <!-- 具名插槽--按钮 -->
    <template #extra>
      <el-button type="primary" @click="userEdit.handleOpen({})"
        >添加</el-button
      >
    </template>
    <el-form inline style="margin-left: 20px">
      <el-form-item style="width: 300px">
        <el-input
          :prefix-icon="Search"
          v-model="params.keyword"
          clearable
          class="w-50"
          placeholder="姓名/手机号"
          @keyup.enter="onSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="restore">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="userList"
      style="width: 100%"
      v-loading="loading"
      :default-sort="[{ prop: 'createTime', order: 'descending' }]"
    >
      <el-table-column type="index" label="序列" width="80" />
      <el-table-column prop="username" label="用户名" width="100" />
      <el-table-column
        prop="roleType"
        label="用户类型"
        :filters="[
          { text: '普通用户', value: 1 },
          { text: '农户', value: 2 },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
        width="100"
      >
        <template #default="{ row }">
          <el-tag v-if="row.roleType === 1" type="primary">普通用户</el-tag>
          <el-tag v-if="row.roleType === 2" type="success">农户</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="realName" label="姓名" width="80" />
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column
        prop="status"
        label="状态"
        width="80"
        :filters="[
          { text: '正常', value: 1 },
          { text: '禁用', value: 0 },
        ]"
        :filter-method="(value, row) => row.status === value"
      >
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="success">正常</el-tag>
          <el-tag v-if="row.status === 0" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="130" sortable>
        <template #default="{ row }">
          {{ formatTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="userEdit.handleOpen(row)"
          ></el-button>
          <el-button
            :icon="More"
            circle
            plain
            type="success"
            @click="orderPreview.handleOpen(row)"
          ></el-button>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[2, 3, 4, 5, 10]"
      background
      layout="jumper,total, sizes, prev, pager, next"
      :total="Number(total)"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 50px; justify-content: flex-end"
    />
  </Card>
  <!-- 用户详情抽屉组件 -->
  <UserManagePreview ref="orderPreview" />

  <!-- 用户信息添加或修改抽屉组件 -->
  <UserManageEdit ref="userEdit" @success="success" />
</template>

<style lang="scss" scoped></style>
